<template>
  <div>
    <!--学习&#45;&#45;活动预约&#45;&#45;详情页-->
    <content-header :title="detail.title"></content-header>
    <share class="xui-fr" :title="detail.title"></share>
    <div class="header xui-fc xui-margin-top-xl">
      <div class="left xui-fl">
        <img-box :imgSrc="detail.imgUrl" width="390" height="306" class="xui-fl"></img-box>
        <ul class="tags" v-if="tagNames">
          <li v-for="(item, index) in tagNames" :key="index">
            <span>{{item}}</span>
          </li>
        </ul>
      </div>
      <div class="xui-fl xui-margin-left-md right">
        <div>
          <span class="color-yellow">活动时间：</span>
          <span class="color-darken-gray">{{detail.startTime | parseDate('{y}年{m}月{d}日')}} - {{detail.endTime |
            parseDate('{y}年{m}月{d}日')}}</span>
        </div>
        <div>
          <span class="color-yellow">报名时间：</span>
          <span class="color-darken-gray">{{detail.signupstartTime | parseDate('{y}年{m}月{d}日')}} -
            {{detail.signupendTime | parseDate('{y}年{m}月{d}日')}}</span>
        </div>
        <div>
          <span class="color-yellow">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点：</span>
          <span class="color-darken-gray">{{detail.hall}}</span>
        </div>
        <div v-if="detail.speaker">
          <span class="color-yellow">主 &nbsp;讲&nbsp;人：</span>
          <span class="color-darken-gray">{{detail.speaker}}</span>
        </div>
        <div class="border xui-padding-bottom-sm">
          <span class="color-yellow">活动类型：</span>
          <span class="color-darken-gray">{{detail.tagtype}}</span>
        </div>

        <div v-if="status=='access'">
          <div class="xui-margin-top-xs">
            <span class="color-yellow">日期场次：</span>
            <div class="block">
              <el-select v-model="order.date" placeholder="选择日期" size="small" @change="getActPeriod">
                <el-option v-for="item in dates" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
              <span class="color-gray">-</span>
              <el-select v-model="order.playId" placeholder="选择时间" size="small" @change="setNumber">
                <el-option v-for="(item,index) in periods" :key="'time'+index" :label="`${item.start} - ${item.end}`"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div v-if="number.total" class="xui-margin-top-xs">
            <span class="color-yellow ">人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：</span>
            <span>{{number.signUp}} / {{number.total}}</span>
            <span class="color-red" v-if="number.signUp >= number.total">人数达到上限</span>
          </div>
          <div v-if="number.signUp < number.total" class="xui-margin-top-sm">
            <el-button type="primary" v-if="detail.lecturetype == '团队'" @click="dialogVisible2 = true" :disabled="isChoosePlayId">团队预约</el-button>
            <el-button type="primary" v-else @click="dialogVisible = true" :disabled="isChoosePlayId">个人预约</el-button>
            <span class="xui-margin-left-sm color-red" v-if="Number(daysBeforeClose) > 0">距离报名结束还有{{daysBeforeClose}}天</span>
            <span class="xui-margin-left-sm color-red" v-else>报名即将结束</span>
          </div>
        </div>
        <h4 v-if="status == 'close'" class="xui-margin-top color-primary">已经结束报名</h4>
        <h4 v-if="status == 'done'" class="xui-margin-top color-primary">活动已结束</h4>
        <div class="xui-margin-top-sm">
          <el-button type="primary" v-if="status == 'needLogin'" @click="showLogin">登录后报名</el-button>
        </div>
      </div>
    </div>
    <div class="info xui-margin-top-md">
      <el-tabs type="border-card">
        <el-tab-pane label="详细介绍">
          <p v-html="detail.content" class="xui-margin-bottom-lg bodyFont" ref="bodyFont" :class="{bodyHeight:isActive}">
          </p>
          <div class="all-text" @click="contentToggle()">
            <span>{{btnText}}</span>
            <i :class="{'el-icon-caret-top': isActive, 'el-icon-caret-bottom': !isActive}"></i>
          </div>
        </el-tab-pane>
        <el-tab-pane label="特别提醒">
          <p v-html="detail.tip" class="xui-margin-bottom-lg bodyFont" ref="bodyFont" :class="{bodyHeight:isActive}"></p>
          <div class="all-text" @click="contentToggle()">
            <span>{{btnText}}</span>
            <i :class="{'el-icon-caret-top': isActive, 'el-icon-caret-bottom': !isActive}"></i>
          </div>
        </el-tab-pane>
        <el-tab-pane label="评论留言">
          <div class="dialog-comment xui-padding-sm">
            <el-form ref="commentForm" :model="form" class="form-comment" :rules="commentRules">
              <el-input v-model="form.comment" prop="comment" placeholder="说点什么..."></el-input>
              <div class="btn-comment">
                <el-button plain @click="postComment">评论</el-button>
              </div>
            </el-form>
            <div class="comment-content xui-margin-top-sm">
              <div class="title">
                <h4 v-if="commentsNum">全部评论</h4>
                <span class="color-gray" v-if="commentsNum">{{commentsNum}}</span>
                <span class="color-gray" v-else>暂无评论，快来第一个评论吧！</span>
              </div>
              <ul class="xui-margin-vertical-xs">
                <li v-for="(item,index) in comments" :key="index" class="xui-padding-vertical-sm">
                  <!-- <div class="avatar">
                    <img :src="item.avatar"/>
                  </div> -->
                  <div class="follow">
                    <span class="xui-fr color-gray">
                      <i class="iconfont" :class="{'color-primary':item.isLike == 'Y','icon-dianzan':item.isLike == 'N','icon-dianzan-fill':item.isLike=='Y'}"
                        style="cursor:pointer" @click="likeComment(item)"></i> {{item.likesNum || 0}}</span>
                  </div>
                  <div>
                    <span class="name">
                      {{item.mname || '游客'}}
                    </span>
                    <span class="time">
                      {{item.stAct}}
                    </span>
                  </div>
                  <p>
                    {{item.content}}
                  </p>
                  <div v-if="item.list.length" class="xui-margin-left-sm xui-padding-horizontal-sm xui-padding-vertical-xs xui-margin-top-xs"
                    style="background:#f5f5f5">
                    <div v-for="(rePost,index) in item.list" :key="index">
                      <div>
                        <span class="name">
                          {{rePost.mname || "游客"}}
                          <i style="font-weight:normal;font-size:12px;color:#999;margin-left:5px;">回复</i>
                        </span>
                        <span class="time">
                          {{rePost.stAct}}
                        </span>
                      </div>
                      <p>
                        {{rePost.content}}
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="all-text">
                <span>显示全部</span>
                <i :class="{'el-icon-caret-top': isActive, 'el-icon-caret-bottom': !isActive}"></i>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--个人预约弹出框-->
    <el-dialog title="个人预约" :visible.sync="dialogVisible" width="1003px">
      <personal @appointed="showTicket" :detail="detail" :date="order.date" :id="id" :playId="order.playId" :title="detail.title"
        :period="actTPeriodStr"></personal>
    </el-dialog>

    <!--团队预约弹出框-->
    <el-dialog title="团队预约" :visible.sync="dialogVisible2" width="1003px">
      <team :vid="id" :playid="order.playId" :actDate="order.date" @teamAppointed="showTeamAppointResult"></team>
    </el-dialog>

    <!-- 个人预约成功后，对话框 -->
    <el-dialog title="门票二维码" :visible.sync="grTicketDialogVisible" center width="580px">
      <p class="xui-font-size-xl color-primary xui-text-center">
        <i class="iconfont icon-check xui-font-size-xxl" style="position:relative;top:2px"></i>
        <span>预约成功</span>
      </p>
      <p class="color-primary xui-text-center xui-margin-top-xs">凭此二维码可自助验票入馆</p>
      <el-carousel :autoplay="false" trigger="click" arrow="always" indicator-position="none">
        <el-carousel-item v-for="(item,index) in grTickets" :key="index">
          <div class="xui-text-center xui-margin-top-sm">
            <img :src="item.qrodeUrl" alt="" style="width:130px;height:130px">
            <p class="color-gray">{{index+1}}/{{grTickets.length}} </p>
            <div style="text-align:left;margin-left:130px; margin-bottom:30px;">
              <p class="xui-text-truncate" style="width:400px">活动主题：{{detail.title}}</p>
              <p v-if="item.persontype !== '学生'">证件号码：{{item.cardnum.substr(0,6) + "********" +
                item.cardnum.substr(-4,4)}} (
                <span class="color-primary">{{item.joinusername}}</span>)</p>
              <p v-if="item.persontype == '学生'">
                <span style="margin-right:2em">学</span>校：{{item.school}}</p>
              <p>活动时间：{{item.lecturedate}} {{item.startdate}}-{{item.enddate}}</p>
              <p>预约票号：{{item.ticketId}}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeResultDialog">确定</el-button>
        <el-button type="primary" plain @click="goToUC">查看我的预约信息</el-button>
      </span>
    </el-dialog>

    <!-- 团队预约 对话框 -->
    <el-dialog title="团队活动预约" :visible.sync="tdTicketDialogVisible" center width="580px">
      <p class="xui-font-size-xl color-primary xui-text-center">
        <i class="iconfont icon-check xui-font-size-xxl" style="position:relative;top:2px"></i>
        <span>提交成功</span>
      </p>
      <p class="xui-text-center xui-margin-top">{{tdReturnMsg}}</p>
      <span slot="footer" class="dialog-footer">
        <router-link :to="{name:'userCenter-myAppointment',query:{tab:'4'}}">
          <el-button type="primary">查看我的预约</el-button>
        </router-link>
        <el-button @click="tdTicketDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import ContentHeader from "@/components/widge/content-header";
  import ImgBox from "@/components/widge/img-box";
  import Personal from "./personal/personal";
  import Team from "./team/team";
  import pic from "@/assets/images/example/wenc.png";
  import {
    getActDetail,
    getActDates,
    getActPeriodInOneDay,
    getActCommentList,
    postComment,
    likeComment
  } from "@/api/act";
  import {
    parseTime,
    getDaysBetweenTwoDates
  } from "@/utils";
  import {
    addBrowseNum
  } from "@/api/detail";
  import share from "@/components/widge/share";

  export default {
    components: {
      ContentHeader,
      ImgBox,
      Personal,
      Team,
      share
    },
    data() {
      return {
        timeId: "",
        isOrder: false,
        detail: {
          signupendTime: "",
          startTime: "",
          endTime: "",
          signupstartTime: "",
          tagNames: ""
        },
        dates: [],
        periods: [],
        number: {
          total: "",
          signUp: ""
        },
        order: {
          date: "",
          playId: null
        },
        orderInfo: {
          personal: {}
        },

        pic,
        form: {
          comment: ""
        },
        commentRules: {
          comment: [{
            required: true,
            message: "请输入评论内容",
            trigger: "blur"
          }]
        },
        dialogVisible: false,
        dialogVisible2: false,
        isActive: false,
        curHeight: 0,
        bodyHeight: 999999999999,
        btnText: "显示全部",
        items: [{
            name: "家庭"
          },
          {
            name: "成人"
          },
          {
            name: "教育"
          }
        ],
        value: "",
        value1: "",
        comments: [],
        commentsNum: "",
        actTPeriodStr: "",
        grTickets: [],
        tdReturnMsg: "",
        grTicketDialogVisible: false,
        tdTicketDialogVisible: false
      };
    },
    computed: {
      id() {
        return this.$route.params.id;
      },
      userId() {
        return this.$store.getters.userId;
      },
      isChoosePlayId() {
        if (this.order.date && this.order.playId) {
          return false;
        }
        return true;
      },
      status() {
        let now = parseTime(new Date(), "{y}-{m}-{d}");
        let signupendTime = this.detail.signupendTime;
        let endTime = this.detail.endTime;
        if (now <= signupendTime) {
          if (this.userId) return "access";
          else return "needLogin";
        }
        if (now > signupendTime && now <= endTime) {
          return "close";
        }
        if (now > endTime) {
          return "done";
        }
      },
      user() {
        return this.$store.getters.userInfo;
      },
      daysBeforeClose() {
        var date1Str = this.detail.signupendTime.split("-"); //将日期字符串分隔为数组,数组元素分别为年.月.日
        //根据年 . 月 . 日的值创建Date对象
        var date1Obj = new Date(date1Str[0], date1Str[1] - 1, date1Str[2]);
        var date2Obj = new Date();
        var t1 = date1Obj.getTime();
        var t2 = date2Obj.getTime();
        var dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
        var minusDays = Math.floor((t2 - t1) / dateTime); //计算出两个日期的天数差
        var days = Math.abs(minusDays); //取绝对值
        return days;
      },
      tagNames() {
        return this.detail.tagNames.split(",");
      }
    },
    methods: {
      contentToggle() {
        this.curHeight = this.$refs.bodyFont.offsetHeight;
        if (this.curHeight < this.bodyHeight) {
          this.isActive = !this.isActive;
          this.btnText = this.isActive === true ? "收起" : "显示全部";
        } else {
          this.btnText = "显示全部";
        }
      },
      changeSrc(index) {
        this.pic = this.items[index].imgSrc;
      },
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      getActDetail() {
        getActDetail(this.id).then(res => {
          this.detail = res.data;
        });
      },
      getActDates() {
        getActDates(this.id).then(res => {
          let now = parseTime(new Date(), "{y}-{m}-{d}");
          this.dates = res.data.filter(date => {
            return date > now;
          });
        });
      },
      getActPeriod() {
        this.number.total = null;
        getActPeriodInOneDay(this.id, this.order.date, this.userId).then(res => {
          this.isOrder = res.data.isOrder == "N" ? false : true;
          this.periods = res.data.list;
        });
        this.order.playId = "";
      },
      personAppoint(data) {},
      setNumber(id) {
        this.timeId = id;
        let item = this.periods.find(per => {
          return per.id == id;
        });
        console.log(item);
        this.number.total = item.number;
        this.number.signUp = item.signUpNum == null ? 0 : item.signUpNum;
        this.actTPeriodStr = item.start + "-" + item.end;
      },
      getCommentList() {
        getActCommentList(this.id, this.userId).then(res => {
          this.comments = res.data.recordsList;
          this.commentsNum = res.data.count;
        });
      },
      postComment() {
        let comment = this.form.comment.trim();
        if (comment.length > 0) {
          let data = {
            id: this.id,
            userId: this.userId,
            userName: this.user.userName,
            comment: this.form.comment
          };
          postComment(data).then(res => {
            if (res.flag == 1) {
              this.$message({
                showClose: true,
                type: "success",
                message: res.msg + ",感谢您的支持！"
              });
              this.form.comment = "";
              return false;
            }
            if (res.flag == -1) {
              this.$message({
                showClose: true,
                type: "error",
                message: res.msg
              });
            }
          });
        } else {
          this.$message({
            type: "error",
            message: "请输入评论内容"
          });
        }
      },
      likeComment(comment) {
        likeComment(comment.id, this.userId, this.id).then(res => {
          if (res.msg == "当前留言您已经点过赞，不可以重复点赞") {
            this.$message({
              type: "warning",
              message: res.msg,
              showClose: true
            });
            return false;
          }
          let index = this.comments.indexOf(comment);
          this.comments[index].likesNum += 1;
          this.comments[index].isLike = "Y";
        });
      },
      showLogin() {
        this.$store.dispatch("ToggleLoginDialog", true);
      },
      showTicket(tickets) {
        this.grTickets = tickets;
        this.grTicketDialogVisible = true;
        this.dialogVisible = false;
        this.number.signUp += 1;
        getActPeriodInOneDay(this.id, this.order.date, this.userId).then(res => {
          let acts = res.data.list;
          let act = acts.find(item => {
            return item.id === this.timeId;
          });
          this.number.total = act.number;
          this.number.signUp = act.signUpNum;
          this.periods = res.data.list;
        });
      },
      goToUC() {
        this.$router.push({
          name: "userCenter-myAppointment",
          query: {
            tab: 3
          }
        });
        this.grTicketDialogVisible = false;
        this.tdTicketDialogVisible = false;
      },
      closeResultDialog() {
        this.grTicketDialogVisible = false;
        this.tdTicketDialogVisible = false;
      },
      showTeamAppointResult(msg) {
        this.dialogVisible2 = false;
        this.tdTicketDialogVisible = true;
        this.tdReturnMsg = msg;
      }
    },
    filters: {
      parseDate: function (value, pattern) {
        if (value) {
          let date = new Date();
          let arr = value.split("-");
          date.setFullYear(Number(arr[0]), Number(arr[1]) - 1, Number(arr[2]));
          return parseTime(date, pattern);
        }
      }
    },
    mounted() {
      this.getActDetail();
      this.getActDates();
      this.getCommentList();
      addBrowseNum(this.id, 8);
    }
  };

</script>
<style lang="less" scoped>
  .bodyHeight {
    height: auto !important;
  }

  .bodyFont {
    height: 68px;
    overflow: hidden;
    max-height: 100%;
  }

  .left {
    position: relative;

    .tags {
      position: absolute;
      top: 10px;
      right: 10px;

      li {
        display: inline-block;
        width: 56px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background-color: #bf9c51;
        color: #fff;
        margin-right: 10px;
      }
    }
  }

  .right {
    width: 56%;

    >div {
      padding: 5px 0;
    }

    span {
      font-size: 14px;
    }

    .border {
      border-bottom: 1px solid #e8e8e8;
      padding-bottom: 10px;
    }

    .block {
      display: inline-block;
    }
  }

  .color-yellow {
    color: #8c6d34;
  }

  .info {
    .all-text {
      width: 75px;
      margin: 0 auto;
      cursor: pointer;

      span {
        font-size: 14px;
        color: #dbad23;
      }

      i {
        color: #bf9c51;
      }
    }
  }

  .dialog-comment {
    .all-text {
      width: 75px;
      margin: auto;
      cursor: pointer;
    }
  }

  .form-comment {
    position: relative;

    .btn-comment {
      position: absolute;
      right: 5px;
      top: 5px;

      .el-button {
        border: 1px solid #dbad23;
        color: #dbad23;
        padding: 7px 20px;
      }
    }
  }

  .comment-content {
    .title {
      h4 {
        font-size: 14px;
        margin-bottom: 0;
        display: inline-block;
        vertical-align: middle;
      }

      span {
        display: inline-block;
        font-size: 13px;
        vertical-align: middle;
      }
    }

    li {
      border-bottom: 1px solid #f5f5f5;
    }

    .avatar {
      float: left;
      width: 52px;
      height: 52px;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
        border: 1px solid #ddd;
        border-radius: 50%;
      }
    }

    .follow {
      float: right;
      margin-top: 5px;
      padding: 0;
      font-size: 13px;
    }

    .name {
      padding-top: 4px;
      font-size: 14px;
      display: inline-block;
      color: #444444;
      font-weight: bold;
      vertical-align: middle;
    }

    .time {
      display: inline-block;
      padding: 4px 0 0 3px;
      font-size: 12px;
      color: #969696;
      vertical-align: middle;
    }

    p {
      margin-top: 2px;
      font-size: 12px;
      color: #444444;
    }

    .all-text {
      cursor: pointer;

      span {
        font-size: 14px;
        color: #dbad23;
      }

      i {
        color: #bf9c51;
      }
    }
  }

  .dialog-footer {
    text-align: center;

    .el-button {
      display: inline-block;
    }
  }

</style>
